<template>
    <a-modal
      :title="title"
      :width="600"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭"
    >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="activityId"
          label="活动名称">
          <a-select v-model="model.activityId" placeholder="请选择" @change="activityChange">
            <a-select-option :value="item.id" v-for="item in hdList" :key="item.id"> {{ item.name }} </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="newTime"
          label="选择时间">
          <a-cascader
            :allowClear="false"
            v-model="newTime"
            :field-names="{ label: 'date', value: 'date', children: 'sessionsDtoList' }"
            :options="timeOptions"
            placeholder="请选择"
            @change="timeonChange"
          />
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop=""
          label="活动消息模板ID">
          <a-input type="number" placeholder="请输入" style="width:325px;" v-model="model.activityTemplId"/>
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop=""
          label="订阅消息模板ID">
          <a-input  type="number" placeholder="请输入" style="width:325px;" v-model="model.subscribeTemplId"  />
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop=""
          label="订阅消息微信模板ID">
          <a-input placeholder="请输入" style="width:325px;" v-model="model.subscribeWxTemplId"  />
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop=""
          label="白名单状态">
          <a-radio-group v-model="model.whiteListStatus">
            <a-radio :value="1">
              启用
            </a-radio>
            <a-radio :value="0">
              禁用
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    </a-modal>
</template>

<script>
  import { saveOrUpdatePush, ByBrandId, getAllSchedule} from '@/api/marketingCenter/invite'
  import JImportModal from './tsImportModal'

  export default {
    name:'cc',
    components: { JImportModal },
    data() {
      var describe=(rules, value,callback)=>{
        if (this.model.activityDate !=='' && this.model.activityDate !== '' && this.newTime[0] !== undefined && this.newTime[1]){
          return callback()
        } else {
          callback("请输选择时间");
        }
      }
      return {
        hdList: [],
        timeOptions: [],
        targetList: [],
        newTime:[],
        title: '',
        visible: false,
        model: {
          activityName:''
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 }
        },
        confirmLoading: false,
        validatorRules: {
          activityId: [{ required: true, message: '请选择!' }],
          // activityTemplId: [{ required: true, message: '请输入!' }],
          // subscribeTemplId: [{ required: true, message: '请输入!' }],
          // subscribeWxTemplId: [{ required: true, message: '请输入!' }],
          newTime: [{ validator: describe, trigger: 'blur', required: true }],
        },
      }
    },
    created() {},
    methods: {
      // 品牌下拉
      getByBrandId() {
        ByBrandId({})
        .then(res => {
          if (res.code === 200) {
            this.hdList = res.data
          } else {
            this.$message.error(res.msg || res.message)
          }
        })
        .catch(err => {})
      },
      // 时间下拉
      getSchedule(activityId) {
        if (this.model.activityId !== undefined ) {
          getAllSchedule({
            activityId
          })
          .then(res => {
            if (res.code === 200) {
              let arrayData = res.data
              arrayData.forEach(element => {
                element.sessionsDtoList.forEach(el => {
                  if (el.time !== '') {
                    el['date'] = el.time
                  }
                })
              });
              this.timeOptions = arrayData
            } else {
              this.$message.error(res.msg || res.message)
            }
          })
          .catch(err => {})
        }
      },
      activityChange(e) {
        let item = {} 
        this.hdList.forEach(el => {
          if (el.id == e) {
            item = el
          }
        })
        this.model.activityName = item.name
        this.model.brandId = item.brandId
        this.model.activityDate = ''
        this.model.activityTime = ''
        this.getSchedule(this.model.activityId)
      },
      // 选择时间
      timeonChange(value,option) {
        this.model.scheduleId = option[0].id
        this.newTime = value
        this.model.activityDate = value[0]
        this.model.activityTime = value[1]
      },
      add() {
        this.edit({})
      },
      edit(record) {
        this.model = Object.assign({}, record)
        if (this.model.activityTemplId == -1) {
          this.model.activityTemplId = ''
        }
        if (this.model.subscribeTemplId == -1) {
          this.model.subscribeTemplId = ''
        }
        if (this.model.subscribeWxTemplId == -1) {
          this.model.subscribeWxTemplId = ''
        }
        this.newTime = [record.activityDate,record.activityTime]
        this.getByBrandId()
        this.getSchedule(this.model.activityId)
        this.visible = true
      },
      // 确定
      handleOk() {
        const that = this
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            var addObject={
              activityName:this.model.activityName, //活动名称里的name
              brandId:this.model.brandId, // 活动名称里的brandId
              scheduleId:this.model.scheduleId, //选择时间id
              activityId:this.model.activityId,
              activityDate:this.newTime[0],
              activityTime:this.newTime[1],
              activityTemplId:this.model.activityTemplId,
              subscribeTemplId:this.model.subscribeTemplId,
              subscribeWxTemplId:this.model.subscribeWxTemplId,
              whiteListStatus:this.model.whiteListStatus,
            }
            if (this.model.id) {
              addObject.id=this.model.id
            }
            saveOrUpdatePush(addObject).then((res) => {
              if (res.success) {
                that.$message.success(res.msg)
                that.$emit('ok')
              } else {
                that.$message.warning(res.msg)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          } else {
            return false;
          }
        })
      },
      // 关闭
      handleCancel() {
        this.close()
      },
      close() {
        this.$emit('close')
        this.visible = false
        this.$refs.form.resetFields();
      },
    }
  }
</script>
<style scoped lang="less">
.divList{
  border-bottom: 1px solid #ccc;
  padding-left: 34px;
  margin-bottom: 30px;
  position: relative;
}
.bairuidelete{
  position:absolute;
  top: 135px;
  right: 80px;
  width: 20px;
  height: 20px;
}
.time_box {
  width:368px;
  height:32px;
  line-height: 32px;
  border:1px solid #d9d9d9;
  color: #bfbfbf;
  padding-left: 11px;
  border-radius: 4px;
}
/deep/.ant-form-item-control {
  line-height: 32px !important;
}
.timePicker {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  /deep/.ant-select {
    .ant-select-selection {
      border: none !important;
    }
    .ant-select-selection__rendered {
      height: 100%;
    }
    .ant-select-selector {
      border: none !important;
    }
    .ant-select-selection {
      border: none !important;
      box-shadow: none;
    }
  }
}

</style>